<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath }"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>chinaz</title>

    <!-- BOOTSTRAP STYLES-->
    <link href="${ctx }/static/assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FONTAWESOME STYLES-->
    <link href="${ctx }/static/assets/css/font-awesome.css" rel="stylesheet" />
    <!--CUSTOM BASIC STYLES-->
    <link href="${ctx }/static/assets/css/basic.css" rel="stylesheet" />
    <!--CUSTOM MAIN STYLES-->
    <link href="${ctx }/static/assets/css/custom.css" rel="stylesheet" />
    <link href="${ctx }/static/assets/css/bootstrap-fileupload.min.css" rel="stylesheet" />
    <style type="text/css">
		#recycleWindow{z-index: 9999;position: absolute;background-color: white;top: 50px;display:none;
	    left: 30%; border: 1px solid #b7d2ff;border-radius: 10px;}
		.r_td{width: 250px;height: 60px;line-height: 30px;text-align: center;border: 1px solid #EEEEEE;border-radius: 10px;}
		.r_td:HOVER{
			-webkit-box-shadow:0 0 15px #0E2D5F;  
			-moz-box-shadow:0 0 15px #0E2D5F;  
			box-shadow:0 0 15px #0E2D5F; 
		}
		.r_td_but{font-size: 10px;position: relative;top: 0px;left: 90px;cursor: pointer;color: red;}
		.box-shadow-3{  
			-webkit-box-shadow:0 0 10px #b9c1ce;  
			-moz-box-shadow:0 0 10px #b9c1ce;  
			box-shadow:0 0 10px #b9c1ce;  
		}
		.a_new{text-decoration: none;color: #3925AB;}
		.a_new:HOVER {text-decoration: none;color: red;}
		.a_new:ACTIVE {text-decoration: none;color: #3925AB;}
		#linkForm td{height: 40px;}
    </style>
    <!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME-->
    <!-- JQUERY SCRIPTS -->
    <script src="${ctx }/static/assets/js/jquery-1.10.2.js"></script>
    <!-- BOOTSTRAP SCRIPTS -->
    <script src="${ctx }/static/assets/js/bootstrap.js"></script>
    <script src="${ctx }/static/assets/js/bootstrap-fileupload.js"></script>
    <!-- METISMENU SCRIPTS -->
    <script src="${ctx }/static/assets/js/jquery.metisMenu.js"></script>
    <!-- CUSTOM SCRIPTS -->
    <%-- <script src="${ctx }/static/assets/js/custom.js"></script> --%>
    <script type="text/javascript" src="${ctx }/static/js/ajaxfileupload.js"></script>
</head>
<body>

<div class="panel panel-default">
	<div class="panel-heading">
		书签与账户信息管理
	</div>

	<div class="panel-body" style="height: 600px;overflow: hidden;">
		
		<!-- 书签  -->
		<c:forEach var="type" items="${requestScope.types }">
			<div class="btn-group">
		       	<button data-toggle="dropdown" class="btn btn-danger dropdown-toggle">${type.name }<span class="caret"></span></button>
		       	<ul class="dropdown-menu">
				<c:forEach var="link" items="${requestScope.links }">
					<c:if test="${link.tid eq type.id }">
			           	<li>
			           		<a href="javascript:details(${link.id });">
			           			<img src="${ctx }/icon/${link.id }.do" style="width: 20px;height: 20px;"/>
			           			&nbsp;
			           			<span>${link.name }</span>
			           		</a>
			           	</li>
				   </c:if>
				</c:forEach>
		       	</ul>
		   	</div>
		</c:forEach>  
		
		<!-- 详情 -->
		<div id="details" style="width: 85%;margin-top: 20px;border-radius: 10px;border: 1px solid #ddd;padding: 10px;display: none;">
			<div style="float: right;margin-right: 10px;">
				<button type="button" class="btn btn-primary" data-toggle="modal" data-target='#updateLinkWindow'>修改</button>
				<button type="button" class="btn btn-danger" onclick="removeLink();">删除</button>
			</div>
			<table class="table">
				<caption style="font-size: 20px;font-weight: bold;">详情</caption>
				<tr>
					<td style="width: 20%;">书签名称：</td>
					<td id="d_name">2333</td>
				</tr>
				<tr>
					<td>书签类型：</td>
					<td id="d_type">2333</td>
				</tr>
				<tr>
					<td>icon：</td>
					<td>
						<img alt="" id="d_icon" src="">
					</td>
				</tr>
				<tr>
					<td>URL：</td>
					<td id="d_url">2333</td>
				</tr>
				<tr>
					<td>描述:：</td>
					<td id="d_des">2333</td>
				</tr>
				<tr>
					<td>账号：</td>
					<td id="d_username">2333</td>
				</tr>
				<tr>
					<td>密码：</td>
					<td id="d_pwd">2333</td>
				</tr>
                                
			</table>
		</div>
	</div>
	
	<!-- 菜单栏 -->
	<div class="row" style="width: 10%;position: absolute;left: 90%;top: 100px;">
        <div class="main-box mb-red">
            <a href="javascript:void(0);" data-toggle="modal" data-target='#linkWindow'>
                <i class="glyphicon glyphicon-plus fa-5x"></i>
                <h5>增加</h5>
            </a>
        </div>
        <div class="main-box mb-dull">
            <a href="javascript:window.location.reload();">
                <i class="glyphicon glyphicon-refresh fa-5x"></i>
                <h5>刷新</h5>
            </a>
        </div>
        <div class="main-box mb-pink">
            <a href="javascript:recycle();">
                <i class="glyphicon glyphicon-trash fa-5x"></i>
                <h5>回收站</h5>
            </a>
        </div>
	</div>               
</div>

<!-- add 窗口 -->
<div class="modal fade" id="linkWindow" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" style="width: 400px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h3 class="modal-title" id="myModalLabel">
					增加Link
				</h3>
			</div>
			<div class="modal-body">
				<form id="linkForm" class="table" method="post" enctype="multipart/form-data">
			    	<table>
			    		<tr>
			    			<td>名称:</td>
			    			<td>
			    				<input class="form-control" type="text" id="add_name" name="name"/>
			    			</td>
			    		</tr>
			    		<tr>
			    			<td>类型:</td>
			    			<td>
			    				<select class="form-control" name="tid" id="add_tid" style="width: 150px;">
				    				<c:forEach var="t" items="${requestScope.types }">
				    					<option value="${t.id }" >${t.name }</option>
				    				</c:forEach>
			    				</select>
			    			</td>
			    		</tr>
			    		<tr>
			    			<td>icon:</td>
			    			<td>
			    				<div class="form-group">
			                        <div class="">
			                            <div class="fileupload fileupload-new" data-provides="fileupload">
			                            <input type="hidden">
			                                <div class="fileupload-preview thumbnail" style="width: 200px; height: 200px; line-height: 200px;">
			                                	<img src="${ctx }/static/img/default.jpg">
			                                </div>
			                                <div>
			                                    <span class="btn btn-file btn-success">
				                                    <span class="fileupload-new">选择 </span>
				                                    <span class="fileupload-exists">重选</span>
				                                    <input type="file" name="iconFile" id="add_icon" multiple="multiple"/>
			                                    </span>
			                                    <a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload">移除</a>
			                                </div>
			                            </div>
			                        </div>
			                    </div>
                            </div>
			    			</td>
			    		</tr>
			    		<tr>
			    			<td>url:</td>
			    			<td>
			    				<input class="form-control" type="text" name="url" id="add_url"/>
			    			</td>
			    		</tr>
			    		<tr>
			    			<td>描述:</td>
			    			<td>
			    				<textarea class="form-control" name="decription" id="add_decription" rows="3" style="height:60px"></textarea>
			    			</td>
			    		</tr>
			    		<tr>
			    			<td>账号:</td>
			    			<td>
			    				<input class="form-control" name="userName" id="add_userName"/>
			    			</td>
			    		</tr>
			    		<tr>
			    			<td>密码:</td>
			    			<td>
			    				<input class="form-control" name="password" id="add_password"/>
			    			</td>
			    		</tr>
			    	</table>
			    </form>
			</div>
			<div class="modal-footer" style="text-align: center;">
				<button type="button" class="btn btn-primary" onclick="save();">保存</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>

<!-- update 窗口 -->
<div class="modal fade" id="updateLinkWindow" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" style="width: 400px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h3 class="modal-title" id="myModalLabel">
					修改Link
				</h3>
			</div>
			<div class="modal-body">
				<form id="linkForm" class="table" method="post" enctype="multipart/form-data">
			    	<table>
			    		<tr>
			    			<td>名称:</td>
			    			<td>
			    				<input type="hidden" id="id" name="id"/>
	    						<input type="hidden" id="isRemove" name="isRemove"/>
			    				<input class="form-control" type="text" id="update_name" name="name"/>
			    			</td>
			    		</tr>
			    		<tr>
			    			<td>类型:</td>
			    			<td>
			    				<select class="form-control" name="tid" id="update_tid" style="width: 150px;">
				    				<c:forEach var="t" items="${requestScope.types }">
				    					<option value="${t.id }" >${t.name }</option>
				    				</c:forEach>
			    				</select>
			    			</td>
			    		</tr>
			    		<tr>
			    			<td>icon:</td>
			    			<td>
			    				<div class="form-group">
			                        <div class="">
			                            <div class="fileupload fileupload-new" data-provides="fileupload">
			                            <input type="hidden">
			                                <div class="fileupload-preview thumbnail" style="width: 200px; height: 200px; line-height: 200px;">
			                                	<img id="update_iconImg">
			                                </div>
			                                <div>
			                                    <span class="btn btn-file btn-success">
				                                    <span class="fileupload-new">选择 </span>
				                                    <span class="fileupload-exists">重选</span>
				                                    <input type="file" name="iconFile" id="update_icon" multiple="multiple"/>
			                                    </span>
			                                    <a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload">移除</a>
			                                </div>
			                            </div>
			                        </div>
			                    </div>
                            </div>
			    			</td>
			    		</tr>
			    		<tr>
			    			<td>url:</td>
			    			<td>
			    				<input class="form-control" type="text" name="url" id="update_url"/>
			    			</td>
			    		</tr>
			    		<tr>
			    			<td>描述:</td>
			    			<td>
			    				<textarea class="form-control" name="decription" id="update_decription" rows="3" style="height:60px"></textarea>
			    			</td>
			    		</tr>
			    		<tr>
			    			<td>账号:</td>
			    			<td>
			    				<input class="form-control" name="userName" id="update_userName"/>
			    			</td>
			    		</tr>
			    		<tr>
			    			<td>密码:</td>
			    			<td>
			    				<input class="form-control" name="password" id="update_password"/>
			    			</td>
			    		</tr>
			    	</table>
			    </form>
			</div>
			<div class="modal-footer" style="text-align: center;">
				<button type="button" class="btn btn-primary" onclick="update();">修改</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>

<!-- 回收站 -->
<div id="recycleWindow" class="box-shadow-3">
	<div style="height: 30px;line-height: 30px;width: 70px;text-align: center;float: left;">回收站</div>
	<div style="height: 30px;line-height: 30px;width: 70px;text-align: center;float: right;">
		<span style="background-color: #EEEEEE;" onclick="$('#recycleWindow').hide();">关闭</span>
	</div>
	<br><br>
	<hr style="margin: 0px;">
	<table cellspacing="10" id="recycleTable" style="font-size: 12px;">
		<tr>
			<td class="r_td box-shadow-3">
				AAAAAA<br/>
				aaa
				<span ><a class="r_td_but" href="">恢复</a></span>
			</td>
			<td class="r_td box-shadow-3">
				BBBBB<br/>
				bbb
				<span ><a class="r_td_but" href="">恢复</a></span>
			</td>
		</tr>		
	</table>
</div>
<script type="text/javascript">
	var types = null;
	var nowId = null;
	$(function() {
		getTypes();
	});
	
	//查看详情
	function details(id){
		$('#details').show();
		$.ajax({
			url:"${ctx }/getById.do",
			type:"GET",
			dataType:"json",
			data : {"id":id},
			cache:false,
			async:true,//同步请求
			success: function(link){
				if(link) {
					nowId = link.id;
					$('#d_name').html(link.name);
					
					for (var i = 0; i < types.length; i++) {
						if (types[i].id == link.tid){
							$('#d_type').html(types[i].name);
							break;
						}
					}
					// 填写详情
					$('#d_icon').attr("src", "${ctx }/icon/" + link.id + ".do");
					$('#d_url').html("<a class='a_new' href=\""+link.url+"\" target=\"view_window\">"+link.url+"</a>");
					$('#d_des').html(link.decription);
					$('#d_username').html(link.userName);
					$('#d_pwd').html(link.password);
					
					// 填写修改框
					$('#update_name').val(link.name);
					$('#update_tid').val(link.tid);
					$('#id').val(link.id);
					$('#isRemove').val(link.isRemove);
					$('#update_iconImg').attr("src", "${ctx }/icon/" + link.id + ".do");
					$('#update_url').val(link.url);
					$('#update_decription').text(link.decription);
					$('#update_userName').val(link.userName);
					$('#update_password').val(link.password);
					
				} else {
					alert("数据异常");
				}
			},
			error:function(){
				alert("数据异常");
			}
		});
	}
	
	/**
	*保存增加
	*/
	function save(){
		$.ajaxFileUpload( {
		    url: '${ctx }/insert.do', //用于文件上传的服务器端请求地址
		    secureuri: false, //是否需要安全协议，一般设置为false
		    fileElementId: 'add_icon', //文件上传域的ID
		    dataType: 'json', //返回值类型 一般设置为json
		    data :{name:$("#add_name").val(), tid:$("#add_tid").val(), url:$("#add_url").val(),
		    	decription:$("#add_decription").val(), userName:$("#add_userName").val(), password:$("#add_password").val()},
		    success: function (data, status) { //服务器成功响应处理函数
		    	if(data == "1") {
					alert("增加成功");
					window.location.reload();
				} else if(data == "2"){
					alert("增加失败");
				} else if(data == "0"){
					alert("图片上传失败");
				}
		    },
		    error: function (data, status, e) {//服务器响应失败处理函数
		    	alert("增加失败");
		    }
		});
	}
	
	//删除
	function removeLink() {
		$.ajax({
			url:"${ctx }/delete.do",
			type:"GET",
			dataType:"json",
			data : {id:nowId},
			cache:false,
			async:true,//同步请求
			success: function(msg){
				if(msg == "1") {
					alert('删除成功');
				} else {
					alert('删除失败');
				}
				window.location.reload();
			},
			error:function(){
				
			}
		});
	}
	
	/**
	*保存修改
	*/
	function update(){
		var name = $('#update_name').val();
		var tid = $('#update_tid').val();
		var id = $('#id').val();
		var isRemove = $('#isRemove').val();
		
		var url = $('#update_url').val();
		var decription = $('#update_decription').val();
		var userName = $('#update_userName').val();
		var password = $('#update_password').val();
		
		$.ajaxFileUpload( {
		    url: '${ctx }/update.do', //用于文件上传的服务器端请求地址
		    secureuri: false, //是否需要安全协议，一般设置为false
		    fileElementId: "update_icon", //文件上传域的ID
		    dataType: 'json', //返回值类型 一般设置为json
		    data :{id:id, name:name, tid:tid, url:url, isRemove:isRemove, decription:decription, userName:userName, password:password},
		    success: function (data, status) { //服务器成功响应处理函数
		    	if(data == "1") {
					alert("修改成功");
				} else if(data == "0"){
					alert("修改失败");
				} 
		    	window.location.reload();
		    },
		    error: function (data, status, e) {//服务器响应失败处理函数
		    	alert("修改失败");
		    	window.location.reload();
		    }
		});
	}
	
	//查询所有的类型
	function getTypes(){
		$.ajax({
			url: "${ctx }/types.do",
			type:"GET",
			dataType:"json",
			cache:false,
			async:true,//同步请求
			success: function(data){
				types = data;
			},
			error:function(){
				
			}
		});
	}
	
	function recycle(){
   		$.ajax({
			url:"${ctx }/recycle.do",
			type:"GET",
			dataType:"json",
			cache:false,
			async:true,//同步请求
			success: function(data){
				$('#recycleTable').empty();
				var html = "";
				for (var i = 0; i < data.length; i += +2) {
					var tr = "<tr>";
					tr += "<td class=\"r_td box-shadow-3\">";
					tr += "<a class=\"r_td_but\" href=\"javascript:void(0)\" onclick=\"recover("+data[i].id+");\">恢复</a>&nbsp;";
					tr += "<a class=\"r_td_but\" href=\"javascript:void(0)\" onclick=\"drop("+data[i].id+");\">删除</a>"+"<br/>";
					tr += data[i].name+"<br/>";
					tr += data[i].url;
					tr += "</td>";
					if(!data[i+1]){
						html += tr;
						continue;
					}
					tr += "<td class=\"r_td box-shadow-3\">";
					tr += "<a class=\"r_td_but\" href=\"javascript:void(0)\" onclick=\"recover("+data[i+1].id+");\">恢复</a>&nbsp;";
					tr += "<a class=\"r_td_but\" href=\"javascript:void(0)\" onclick=\"drop("+data[i+1].id+");\">删除</a>"+"<br/>";
					tr += data[i+1].name+"<br/>";
					tr += data[i+1].url;
					tr += "</td>";
					tr += "</tr>";
					
					html += tr;
				}
				$('#recycleTable').append(html);
				$('#recycleWindow').show();
				
			},
			error:function(){
				
			}
		});
   	}
   	//恢复一个
   	function recover(id){
   		$.ajax({
			url:"${ctx }/recover.do",
			type:"GET",
			dataType:"json",
			data :{id:id},
			cache:false,
			async:true,//同步请求
			success: function(data){
				recycle();
			},
			error:function(){
				
			}
		});
   	}
   	
	//彻底删除一个
   	function drop(id){
   		$.ajax({
			url:"${ctx }/drop.do",
			type:"GET",
			dataType:"json",
			data :{id:id},
			cache:false,
			async:true,//同步请求
			success: function(data){
				recycle();
			},
			error:function(){
				
			}
		});
   	}
</script>      
   
    


</body>
</html>
